import React, {Component} from 'react';
import app from '../app';
import {Form, Input, Layout, message, Button} from 'antd';
import {admin} from '../value';
import {config} from "../config";
import logo from '../image/logo.jpg';
import phones from '../image/logo1.png';
import '../css/login.css';
import md5 from 'MD5';

const FormItem = Form.Item;

// 登陆界面
class ForgetPassword extends Component {
    constructor(props) {
        super(props);
        this.state = {
            admin_username: '',
            admin_password: '',
            sendDisabled:false,
            confirmLoading: false,
            codeTime: '',  //倒计时时间
        };
    }

    formItemLayout = {
        labelCol: {span: 8},
        wrapperCol: {span: 10},
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <Layout style={{background: '#fff', height: '100%', textAlign: 'center'}}>
                {/*<Header style={{background: '#fff'}}/>*/}

                <div className="header">
                    <div className="area">
                        <a href="" target="_blank"><img className="logo" src={logo} /></a>
                        <div className="greeting">欢迎登录</div>
                        <div className="menu">
                            技术支持：佛山市领蓝信息科技有限公司&nbsp;&nbsp;
                            电话：13726904657（微信同号）&nbsp;&nbsp;
                        </div>
                    </div>
                </div>

                <div className="contents">
                    <div className="bg"></div>
                    <div className="area">
                        <div className="phones_img">
                            <img src={phones} />
                        </div>

                        <div className="loginbox">
                            <Form>
                                <h1>陆河农信社</h1>
                                <div className="item userName">
                                    <label ></label>
                                    <FormItem >
                                        {getFieldDecorator('admin_username', {
                                            rules: [{required: true, message: '请输入!'}],
                                        })(
                                            <Input id="txt_userName" className="empty" type="text" placeholder="请输入账号" />
                                        )}
                                    </FormItem>

                                </div>
                                <div className="item passWord">
                                    <label ></label>
                                    <FormItem >
                                        {getFieldDecorator('admin_password', {
                                            rules: [{required: true, message: '请输入!'}],
                                        })(
                                            <Input id="txt_password" type="password" className="empty" placeholder="请输入密码" />
                                        )}
                                    </FormItem>
                                </div>
                                <div className="item passWord">
                                    <label ></label>
                                    <FormItem >
                                        {getFieldDecorator('admin_rePassword', {
                                            rules: [{required: true, message: '请输入!'}],
                                        })(
                                            <Input id="txt_password" type="password" className="empty" placeholder="请输入确认密码" />
                                        )}
                                    </FormItem>
                                </div>

                                <div className="item userName">
                                    <label ></label>
                                    <FormItem>
                                        {getFieldDecorator('code', {
                                            rules: [{required: true, message: '请输入验证码!'}],
                                        })(
                                            <Input placeholder="输入验证码"/>
                                        )}
                                    </FormItem>
                                    <Button
                                        style={{position:'absolute',top:'50%',right:'5px', transform:'translate(0,-50%)'}}
                                        disabled={this.state.sendDisabled} onClick={() => {
                                        this.sendCode()
                                    }} type='primary'>发送验证码{this.state.codeTime}</Button>
                                </div>

                                <Button
                                    loading={this.state.loading}
                                    onClick={(e) => this.handleSubmit(e)}
                                    id="longinSubmit" className="submit">确定</Button>

                                <div className="forget">
                                    <a onClick={(e) =>{
                                        this.props.history.push(config.path+'/login')
                                    }}>登录</a></div>


                            </Form>
                        </div>
                    </div>
                </div>

                <div className="bottom">
                    <div className="area info">
                        <span>2017-2017 © Copyright. LingLan Network - All Rights Reserved.</span>
                    </div>
                </div>
            </Layout>
        )
    }

    componentDidMount() {
        message.config({
            top: '30%',
            duration: 2,
        });
    }

    // 发送验证码
    sendCode() {
        let that = this;
        let admin_username = this.props.form.getFieldValue('admin_username');
        if (admin_username&& admin_username != '') {
            app.post(admin.ADMIN_SEND_SMS, {admin_username: admin_username}).then(req => {
                if (req.code == 1) {
                    app.alert('已将验证码发送到您手机', 'success', 2);
                    that.setState({
                        sendDisabled: true,
                    });
                    let codeTime = 61;
                    that.Interval(codeTime);
                }   else if(req.code==2) {
                    app.alert(req.msg, 'error', 2);
                }
            })
        }
        else {
            message.info('请输入账号')
        }
    }

    Interval(codeTime) {
        const that = this;
        let indeval = setInterval(function () {
            codeTime = Number(codeTime) - Number(1);
            that.setState({
                codeTime: '(' + codeTime + 's)',

            });
            if (codeTime < 0) {
                that.setState({
                    sendDisabled: false,
                    codeTime: '',
                });
                clearInterval(indeval);
            }
        }, 1000);
        this.indevals=indeval;
    }

    handleSubmit = (e) => {
        let that = this;
        e.preventDefault();
        that.props.form.validateFields((err, values) => {
            if (!err) {
                if (values.admin_password === values.admin_rePassword) {
                    that.setState({confirmLoading: true});
                    values.admin_password = md5(values.admin_password);
                    app.post(admin.FORGET_PASSWORD, values).then(req => {
                        that.setState({confirmLoading: false});
                        if (req.code == 1) {
                            app.alert('修改成功', 'success', 1);
                            clearInterval(that.indevals);
                            that.props.history.push(config.path + "/login");
                            that.setState({
                                sendDisabled:false,
                                codeTime:''
                            });
                        }   else if(req.code==2) {
                            app.alert(req.msg, 'error', 2);
                        }
                    })
                }
                else {
                    message.info('请确认您输入的两次密码是否一致')
                }
            }
        });
    }

}
const ForgetPasswords = Form.create()(ForgetPassword);
export default ForgetPasswords;